<template>
  <div class="bottom-line">
    <div class="subtitle">
      订单选择
    </div><!--搜索-->
    <div>
      <el-form class="clearfix">
        <el-col :lg="3" :md="5" :sm="5" :xs="24">
          <el-form-item label="id" label-width="80px">
            <el-input v-model="filter_info.ad_id" size="mini" placeholder="输入id"/>
          </el-form-item>
        </el-col>
        <el-col :lg="3" :md="5" :sm="5" :xs="24">
          <el-form-item label="公众号" label-width="80px">
            <el-input v-model="filter_info.name" size="mini" placeholder="输入公众号"/>
          </el-form-item>
        </el-col>
        <el-col :lg="3" :md="5" :sm="5" :xs="24">
          <el-form-item label="广告主" label-width="80px">
            <el-input v-model="filter_info.ad_name" size="mini" placeholder="输入广告主"/>
          </el-form-item>
        </el-col>
        <el-col :lg="5" :sm="5" :xs="24" class="my-date-picker mr10">
          <el-form-item label="时间" label-width="80px">
            <el-date-picker
              v-model="filter_info.created_at"
              size="mini"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="-"
              start-placeholder="起始时间"
              end-placeholder="结束时间"
              unlink-panels
              popper-class="datepicker"
            />
          </el-form-item>
        </el-col>
        <el-col :lg="3" :md="5" :sm="5" :xs="24">
          <el-form-item>
            <el-button type="primary" size="mini" @click="search">查询</el-button>
            <el-button type="primary" size="mini" @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <el-row type="flex" justify="space-between" style="flex-wrap:wrap">
      <!--订单选择表格-->
      <el-col :lg="11" :md="11" :sm="24" class="mb15">
        <el-card>
          <v-table
            :editable="false"
            :select="false"
            :deletable="false"
            :table-data="tableData"
            :table-title="tableTitle"
            :show-pagination="false"
            :addable="true"
            btn-class="btn"
            max-height="400"
            @add="addToRight"
          />
        </el-card>
      </el-col>
      <!--订单选择右侧表格-->
      <el-col :lg="11" :md="11" :sm="24" class="mb15">
        <el-card class="clearfix">
          <v-table
            :editable="false"
            :table-data="rightData1"
            :table-title="rightTitle"
            :readable="true"
            :del-confirm="false"
            :show-pagination="false"
            btn-class="btn"
            @read="readOrder"
            @del="delRight"
          />
          <el-row type="flex" justify="space-between" class="pdv15 ">
            <el-col>
              <span>{{ desc }}总金额: </span>
              <span>{{ totalMoney }}</span>
            </el-col>
            <el-col  style="text-align: right; font-size: 12px; color: #999999;">
              <i class="el-icon-info mr5"/> 自定义{{ desc }}金额不得超过订单总金额
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row type="flex" justify="end">

      <el-button type="primary" size="mini" @click="next1">确认信息,下一步</el-button>
    </el-row>
  </div>
</template>

<script>
  import auth from '@/mixins/auth'
export default {
  name: 'OrderList',
  mixins: [auth],
  props: {
    rightData: {
      type: Array
    },
    totalMoney1: {
      default: 0
    },
    invoice: {
      type: Boolean,
      default: false
    },
    toOrder: {
      type: Boolean,
      default: false
    },
    tableTitle: {
      type: Array,
      default: () => [
        {
          cn: 'id',
          en: 'ad_id'
        },
        {
          cn: '公众号',
          en: 'name'
        },
        {
          cn: '广告主',
          en: 'ad_name'
        },
        {
          cn: '订单金额',
          en: 'ad_price'
        },
        {
          cn: '剩余收款金额',
          en: 'rest_money',
          type:'money',
          width: '120px'
        },
        {
          cn: '时间',
          en: 'publish_at'
        }
      ]
    },
    rightTitle: {
      type: Array,
      default: () => [
        {
          cn: 'id',
          en: 'ad_id'
        },
        {
          cn: '公众号',
          en: 'name'
        },
        {
          cn: '剩余收款金额',
          en: 'rest_money'
        },
        {
          cn: '本次收款金额',
          en: 'money',
          type: 'money'
        },
        {
          cn: '时间',
          en: 'publish_at'
        }
      ]
    },
    desc: {
      type: String,
      default: '开票'
    }
  },
  activated(){
      this.getTableList();
      this.rightData1 = this.rightData||[]
  },
  data() {
    return {
      // 订单选择
      tableData: [],
      time: [],
      filter_info: {},
      onFilter: false,
      rightData1: [] || this.rightData
    }
  },
  computed: {
    // 计算总价
    totalMoney() {
      let money = 0
      this.rightData1.forEach(item => {
        money += (+item.money || 0)
      })
      return money
    },
    filter_infos() {
      const data = {}
      const origin = this.filter_info
      for (const key in origin) {
        if (!this.filter_info[key] && this.filter_info[key] !== 0) {
          this.$delete(this.filter_info, key)
          continue
        }
        if (key === 'created_at') {
          data.start_time = origin[key][0]
          data.End_time = origin[key][1]
        } else {
          data[key] = origin[key]
        }
      }
      if (!origin.created_at) {
        delete data.start_time
        delete data.End_time
      }
      return data
    }
  },
  watch: {
    totalMoney(val) {
      this.$emit('update:totalMoney1', val)
    },
    rightData(val) {
      console.log(val);
      if (val.length) {
        this.rightData1 = val
      }else{
        this.rightData1 = []
      }
    }
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    // 获取订单列表
    getTableList(data) {
      const datas = { ...data, rows: 10, sidx: 'publish_at', ...this.filter_infos, type: 0 }

      this.$get('action/WechatAdvs/dataGrid', datas)
        .then(res => {
          let list
          const data = res.data
          const rest_money = 0
          if (data.list && data.list.length) {
            list = data.list.map((item, index) => {
              const data = item
              data.rest_money = +data.ad_price - data.real_price
              if (data.money) {
                return data
              }
              data.money = data.rest_money
              return data
            })
          }

          this.tableData = list || []
        })
    },
    timeChange(val) {
      console.log(val)
      this.filter_info.start_time = val[0]
      this.filter_info.end_time = val[1]
    },
    // 搜索
    search() {
      this.pageInfo.pageNumber=1
      this.getTableList()
    },

    reset() {
      this.filter_info = {}
      this.getTableList()
    },

    // 添加到右侧
    addToRight(val) {
      if (!this.rightData1.length) {
        this.rightData1.push(val.row)
      } else {
        let status = true
        for (let i = 0; i < this.rightData1.length; i++) {
          if (this.rightData1[i].ad_id === val.row.ad_id) {
            status = false
          }
        }
        if (status) {
          this.rightData1.push(val.row)
        }
      }
      // let newSet = new Set(this.rightData1);
      // newSet.add(val.row);
      // this.rightData1 =[...newSet];
      this.$emit('update:rightData', this.rightData1)
      // this.$emit('rightDataChange', this.rightData1);
    },

    // 删除右侧
    delRight(val) {
      this.rightData1[val.$index].money = this.rightData1[val.$index].rest_money
      this.rightData1.splice(val.$index, 1)
    },
    // 查看订单
    readOrder(val) {
      console.log(val)
      this.$router.push({
        name: 'adv_order.order_info',
        query: {
          id: val.row.ad_id
        }
      })
      this.$emit('update:toOrder',true)
    },

    next1() {
      this.$emit('next1', this.rightData1, this.totalMoney)
    }
  }
}
</script>

<style scoped>
    /*.mr5{*/
    /*margin-right:5px;*/
    /*}*/
</style>
